<template>
  <view class="contont" v-if="json">
    <u-loading-page :loading="loading" style="z-index: 99999"></u-loading-page>
    <view class="header">
      <image class="m-img" src="/static/images/logo/bzjp_1.png" mode="widthFix"></image>
    </view>
    <view class="material-box">
      <view class="material-img1"></view>
      <view class="material-img2"></view>
      <view class="top clearfix">
        <em class="left center-text">您输入的个人资料</em>
      </view>
      <view class="center clearfix">
        <view class="infor clearfix">
          <view class="infor1 left">
            <text class="key-text">性别:</text>
            <text class="value-text">{{ json.data.user.sex }}</text>
          </view>
          <view class="infor2 left">
            <text class="key-text">生肖:</text>
            <text class="value-text">{{ json.data.user.sx }}</text>
          </view>
        </view>
        <view class="infor-data clearfix">
          <text class="key-text left">生辰:</text>
          <view class="value-text left">
            <p style="font-size: 17px">{{ json.data.user.nianling.y }}年{{
                json.data.user.nianling.m
              }}月{{ json.data.user.nianling.d }}日{{ json.data.user.nianling.h }}时</p>
            <p style="font-size: 17px">{{ json.data.user.lDate }}</p>
          </view>
        </view>
        <view class="infor-table">
          <p class="key-text"> 您的五行八字资料</p>
          <table class="tables">
            <tbody class="tbodys">
            <tr class="trs">
              <th class="ths">八字</th>
              <th class="ths">年柱</th>
              <th class="ths">月柱</th>
              <th class="ths">日柱</th>
              <th class="ths">时柱</th>
            </tr>
            <tr>
              <td class="tds">天干</td>
              <td class="tds">{{ json.data.user.bazi[0] }}</td>
              <td class="tds">{{ json.data.user.bazi[1] }}</td>
              <td class="tds">{{ json.data.user.bazi[2] }}</td>
              <td class="tds">{{ json.data.user.bazi[3] }}</td>
            </tr>
            <tr>
              <td class="tds">地支</td>
              <td class="tds">{{ json.data.user.bazi[4] }}</td>
              <td class="tds">{{ json.data.user.bazi[5] }}</td>
              <td class="tds">{{ json.data.user.bazi[6] }}</td>
              <td class="tds">{{ json.data.user.bazi[7] }}</td>
            </tr>
            </tbody>
          </table>
        </view>
        <view class="solution-box clearfix">
          <view class="sol-left">
            <p class="sol-left-p">
              <!--              本命属{{ json.data.user.sx }}，{{ json.data.rglm.rgz }}命。；日主天干为佛灯火辛，生于秋季。-->
            </p>
          </view>
        </view>
      </view>
    </view>
    <view class="content-box page3-content">
      <view class="titles" style="display: flex">
        <img src="/static/images/logo/pic-text4.png" style="text-align: center;margin: 2% auto;"></img>
      </view>
      <view class="list-box list1">
        <h2 class="clearfixs">
          <text class="icon icon1"></text>
          <em style="font-style: normal;font-size: 18px;line-height: 40px;font-weight: 500;">八字排盘</em>
        </h2>
        <view class="list-text">
          <text class="red">提示:</text>
          <text class="list-text-text">
            八字命盘从阴阳干支三合历取得。上排是天干，由五行「金水木火土」轮流排列。下排是地支，用十二生肖顺序排列。十二生肖可转换成五行。
          </text>
        </view>
        <table class="tabless">
          <tbody class="tbodyss">
          <tr class="trss">
            <th class="thss">八字</th>
            <th class="thss">年柱</th>
            <th class="thss">月柱</th>
            <th class="thss">日柱</th>
            <th class="thss">时柱</th>
          </tr>
          <tr class="trss">
            <th class="thss">天干</th>
            <td class="tdss">{{ json.data.user.bazi[0] }}<font color="blue"></font></td>
            <td class="tdss">{{ json.data.user.bazi[1] }}<font color="blue"></font></td>
            <td class="tdss">{{ json.data.user.bazi[2] }}<font color="blue"></font></td>
            <td class="tdss">{{ json.data.user.bazi[3] }}<font color="blue"></font></td>
          </tr>
          <tr class="trss">
            <th class="thss">地支</th>
            <td class="tdss">{{ json.data.user.bazi[4] }}<font color="blue"></font></td>
            <td class="tdss">{{ json.data.user.bazi[5] }}<font color="blue"></font></td>
            <td class="tdss">{{ json.data.user.bazi[6] }}<font color="blue"></font></td>
            <td class="tdss">{{ json.data.user.bazi[7] }}<font color="blue"></font></td>
          </tr>
          <tr class="trss">
            <th class="thss">藏干</th>
            <td class="tdss">{{ json.data.pp.zanggan1 }}</td>
            <td class="tdss">{{ json.data.pp.zanggan2 }}</td>
            <td class="tdss">{{ json.data.pp.zanggan3 }}</td>
            <td class="tdss">{{ json.data.pp.zanggan4 }}</td>
          </tr>
          <tr class="trss">
            <th class="thss">命宫</th>
            <td colspan="4" class="tdss">{{ json.data.pp.minggong }}</td>
          </tr>
          <tr class="trss">
            <th class="thss">胎元</th>
            <td colspan="4" class="tdss">{{ json.data.pp.taiyuan }}</td>
          </tr>
          <!--          <tr class="trss">-->
          <!--            <th class="thss">胎息</th>-->
          <!--            <td colspan="4" class="tdss">{{ json.data.pp.taixi }}</td>-->
          <!--          </tr>-->
          </tbody>
        </table>
      </view>
      <view class="list-box list3">
        <h2 class="clearfixs">
          <text class="icon icon3"></text>
          <em style="font-style: normal;font-size: 18px;line-height: 40px;font-weight: 500;">五行综述</em>
        </h2>
        <table class="table3">
          <tbody class="tbody3">
          <tr class="tr3">
            <th class="th3">八字</th>
            <th class="th3">{{ json.data.user.bazi[0] }}{{ json.data.user.bazi[4] }}</th>
            <th class="th3">{{ json.data.user.bazi[1] }}{{ json.data.user.bazi[5] }}</th>
            <th class="th3">{{ json.data.user.bazi[2] }}{{ json.data.user.bazi[6] }}</th>
            <th class="th3">{{ json.data.user.bazi[3] }}{{ json.data.user.bazi[7] }}</th>
          </tr>
          <tr class="tr3">
            <th class="th3">五行</th>
            <td class="td3">{{ json.data.user.wh[0] }}{{ json.data.user.wh[4] }}</td>
            <td class="td3">{{ json.data.user.wh[1] }}{{ json.data.user.wh[5] }}</td>
            <td class="td3">{{ json.data.user.wh[2] }}{{ json.data.user.wh[6] }}</td>
            <td class="td3">{{ json.data.user.wh[3] }}{{ json.data.user.wh[7] }}</td>
          </tr>
          </tbody>
        </table>
      </view>

    </view>
    <view class="content-box page3-content">
      <view class="title" style="display: flex">
        <img src="/static/images/logo/pic-text2.png" style="text-align: center;margin: 2% auto;"></img>
      </view>
      <view class="content-warp1">
        <view class="warp1-text-box">
          <h3 class="warp1-text-box-h3">
            ●性格分析:
          </h3>
          <view class="warp1-text">
            {{ json.data.rglm.xgfx }}
          </view>
        </view>
        <view class="warp1-text-box">
          <h3 class="warp1-text-box-h3">
            ●爱情分析:
          </h3>
          <view class="warp1-text">
            {{ json.data.rglm.aqfx }}
          </view>
        </view>
        <view class="warp1-text-box">
          <h3 class="warp1-text-box-h3">
            ●事业分析:
          </h3>
          <view class="warp1-text">
            {{ json.data.rglm.syfx }}
          </view>
        </view>
        <view class="warp1-text-box">
          <h3 class="warp1-text-box-h3">
            ●健康分析:
          </h3>
          <view class="warp1-text">
            {{ json.data.rglm.jkfx }}
          </view>
        </view>
        <view class="warp1-text-box">
          <h3 class="warp1-text-box-h3">
            ●财运分析:
          </h3>
          <view class="warp1-text">
            {{ json.data.rglm.cyfx }}
          </view>
        </view>

        <view class="warp1-text-box">
          <h3 class="warp1-text-box-h3">
            ●三命通会:
          </h3>
          <view class="warp1-text">
            {{ json.data.sxth.tf1 }}
          </view>
          <view class="warp1-text">
            {{ json.data.sxth.tf2 }}
          </view>
        </view>


        <view class="warp1-text-box">
          <h3 class="warp1-text-box-h3">
            ●未来一年:
          </h3>
          <view class="warp1-text" v-for="item in array">
            {{ item }}
          </view>
        </view>
      </view>
    </view>
<!--    <image :src="src" mode="widthFix" class="imageKnow_img"></image>-->
  </view>
</template>
<script>
import {getCustomerInfoByOrderNum, getJsonByOrderNum, measure, QYcode} from "@/api/system/system";

export default {
  data() {
    return {
      form: {},
      json: null,
      loading: false,
      src: null,
      array: [],
      orderNumber: null
    }
  },
  onLoad(option) {
    if (option) {
      this.orderNumber = option.orderNumber
      this.getInfos(this.orderNumber)
      this.getCode()
      this.getJson()
    }
  },
  methods: {
    getJson() {
      let params = {
        orderNumber: this.orderNumber
      }
      getJsonByOrderNum(params).then(res => {
        this.json = JSON.parse(res.data.json)
        this.array = this.json.data.myq_text.split('\n')
        this.loading = false
      }).catch(() => {
      })
    },
    getInfos(orderNumber) {
      let params = {
        orderNumber: orderNumber
      }
      getCustomerInfoByOrderNum(params).then(res => {
        this.form = res.data

      })
    },
    getCode() {
      QYcode().then(res => {
        this.src = res.rows[0].wxCode
      }).catch(() => {
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.m-img {
  display: block;
  width: 100%;
}

.contont {
  background-color: #FFFFFF;
}

.imageKnow_img {
  width: 100%;
  display: block;
}

.material-box {
  width: 100%;
  position: relative;

  .material-img1 {
    width: 90px;
    height: 35px;
    background: url(/static/images/logo/pic4L.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .material-img2 {
    width: 90px;
    height: 35px;
    background: url(/static/images/logo/pic4R.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .top {
    height: 35px;
    line-height: 35px;
  }

  .center-text {
    padding: 0;
    font-size: 18px;
    color: #ce1e38;
    text-align: center;
    width: 100%;
    font-weight: 700;
    float: left;
    font-style: normal;
  }

  .clearfix:after {
    clear: both;
    height: 0px;
    font-size: 0px;
    visibility: hidden;
    display: block;
    content: " ";
  }

  .center {
    padding: 10px;
    zoom: 1;

    .infor {
      zoom: 1;

      .infor1 {
        margin-right: 20%;
        float: left;

        .key-text {
          font-size: 18px;
          color: #000;
          margin-right: 10px;
        }

        .value-text {
          font-size: 20px;
          color: #f31b34;
        }
      }

      .infor2 {
        float: left;

        .key-text {
          font-size: 18px;
          color: #000;
          margin-right: 10px;
        }

        .value-text {
          font-size: 20px;
          color: #f31b34;
        }
      }
    }

    .infor-data {
      margin-top: 15px;
      margin-bottom: 15px;

      .key-text {
        font-size: 18px;
        color: #000;
        margin-right: 10px;
      }

      .left {
        float: left;
      }

      .value-text {
        font-size: 20px;
        color: #f31b34;
      }

      .left {
        float: left;
      }
    }

    .clearfix {
      zoom: 1;
    }

    .key-text {
      font-size: 18px;
      color: #000;
      margin-right: 10px;
    }
  }

  .tables {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 1;
    border: 1px solid #b09589;
    margin-top: 10px;
    font-size: 16px;
    box-sizing: border-box;
    text-indent: initial;
    unicode-bidi: isolate;

    .tbodys {
      display: table-row-group;
      vertical-align: middle;
      unicode-bidi: isolate;
      border-color: inherit;
    }

    .trs {
      display: table-row;
      vertical-align: inherit;
      unicode-bidi: isolate;
      border-color: inherit;
    }

    .ths {
      background: #ebc9bd;
      border: 1px solid #b09589;
      height: 38px;
      display: table-cell;
      vertical-align: inherit;
      font-weight: bold;
      text-align: -internal-center;
      unicode-bidi: isolate;
    }

    .tds {
      background: #f5f0ee;
      border: 1px solid #b09589;
      height: 38px;
      display: table-cell;
      vertical-align: inherit;
      unicode-bidi: isolate;
    }
  }

  .solution-box {
    margin-top: 10px;
    zoom: 1;

    .sol-left {
      width: 100%;
      font-size: 18px;

      .sol-left-p {
        line-height: 29px;
        text-align: justify;
      }
    }
  }


}

.titles {
  //height: 0.7rem;
  background: url(/static/images/logo/pic6.png) repeat-x 0 bottom;;
}

.clearfixs {
  font-size: 18px;
  line-height: 40px;
  border-bottom: 1px dashed #81594b;
  margin: 5px;
  font-weight: 500;
}

.icon1 {
  background: url(/static/images/logo/icon1.png) no-repeat;
  background-size: 100% 100%;
  float: left;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 10px 0 5px;
}

.icon3 {
  background: url(/static/images/logo/icon3.png) no-repeat;
  background-size: 100% 100%;
  float: left;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 10px 0 5px;
}

.red {
  color: #ff0000;
}

.list-text {
  padding: 0 10px;
  line-height: 26px;
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 5px;
  text-align: justify;
}

.list-text-text {
  line-height: 26px;
  font-size: 16px;
  text-align: justify;
}

.tabless {
  width: 96%;
  margin: 0 auto;
  margin-top: 7px;
  font-size: 16px;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #b09589;

  .tbodyss {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;

    .trss {
      display: table-row;
      vertical-align: inherit;
      unicode-bidi: isolate;
      border-color: inherit;

      .thss {
        background: #ebc9bd;
        border: 1px solid #b09589;
        height: 35px;
        display: table-cell;
        vertical-align: inherit;
        font-weight: bold;
        text-align: -internal-center;
        unicode-bidi: isolate;
      }

      .tdss {
        background: #f5f0ee;
        border: 1px solid #b09589;
        height: 35px;
      }
    }
  }
}

.table3 {
  width: 96%;
  margin: 0 auto;
  margin-top: 7px;
  font-size: 16px;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #b09589;
  box-sizing: border-box;
  text-indent: initial;
  unicode-bidi: isolate;
  border-spacing: 2px;
  display: table;

  .tbody3 {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;

    .tr3 {
      display: table-row;
      vertical-align: inherit;
      unicode-bidi: isolate;
      border-color: inherit;
    }

    .th3 {
      background: #ebc9bd;
      border: 1px solid #b09589;
      height: 35px;
      display: table-cell;
      vertical-align: inherit;
      font-weight: bold;
      text-align: -internal-center;
      unicode-bidi: isolate;
    }

    .td3 {
      background: #f5f0ee;
      border: 1px solid #b09589;
      height: 35px;
      display: table-cell;
      vertical-align: inherit;
      unicode-bidi: isolate;
    }
  }
}

.title {
  background: url(/static/images/logo/pic6.png) repeat-x 0 bottom;;

}

.page3-content {
  margin-top: 16px;
  padding-bottom: 34px;
}

.content-box {
  width: 100%;
  position: relative;
}

.content-warp1 {
  padding: 0 10px;
}

.warp1-text-box {
  font-size: 18px;
}

.warp1-text {
  text-indent: 1em;
  color: #444;
  font-size: 16px !important;
  line-height: 32px !important;
  text-align: justify;
  font: 14px / 1.4 "Microsoft Yahei", Arial, Helvetica, sans-serif;
}

.warp1-text-box-h3 {
  font-weight: 700;
  line-height: 35px;
  margin-top: 10px;
  font-size: 18px;
}
</style>
